<template>
  <div>
    <!--<form action="" id="form" @change="change($event)">-->
      <!--<input type="file" id="file" name="file"/>-->
    <!--</form>-->

    <el-upload
      action="/web/regist/commitpic"
      :headers="uploadheader"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog v-model="dialogVisible" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        uploadheader: {
          'X-Access-Token': localStorage.getItem('accessToken')
        }
      }
    },
    methods: {
      handleRemove (file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview (file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      post (url, data) {
        let oAjax = new XMLHttpRequest()
        oAjax.open('post', url, true)
        // oAjax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
        oAjax.setRequestHeader('X-Access-Token', localStorage.getItem('accessToken'))
        oAjax.send(data)
        oAjax.onreadystatechange = function () {
          if (oAjax.readyState === 4) {
            console.log(oAjax.responseText)
          } else {
            console.log('你访问的页面出错了')
          }
        }
      },
      change (e) {
        let fileobj = e.target.files[0]
//        debugger
        let formData = new FormData()
        formData.append('file', fileobj)
        this.post('/web/regist/commitpic', formData)
      }
    }
  }
</script>

<style scoped>
  .a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
  }

  .a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
  }

  .a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
  }
</style>
